<template>
  <div class="ranking-list-vessel">
    <template v-if="rankObj.topThreeList.length > 0 || rankObj.restList.length > 0">
      <el-scrollbar style="height: 235px">
        <div class="ranking-list">
          <template v-for="(item, _index) in rankObj.topThreeList" :key="_index">
            <div v-if="item.rank === 1" class="ranking-item">
              <div class="rank">
                <icon-fluent-emoji1st-place-medal></icon-fluent-emoji1st-place-medal>
              </div>
              <div class="title" style="color: #ffba57">{{ item.title }}</div>
              <div class="sub-title">{{ item.subTitle }}</div>
              <div class="value" style="color: #ffba57">{{ item.value }}</div>
            </div>
            <div v-if="item.rank === 2" class="ranking-item">
              <div class="rank">
                <icon-fluent-emoji2nd-place-medal></icon-fluent-emoji2nd-place-medal>
              </div>
              <div class="title" style="color: #c5cae9">{{ item.title }}</div>
              <div class="sub-title">{{ item.subTitle }}</div>
              <div class="value" style="color: #c5cae9">{{ item.value }}</div>
            </div>
            <div v-if="item.rank === 3" class="ranking-item">
              <div class="rank">
                <icon-fluent-emoji3rd-place-medal></icon-fluent-emoji3rd-place-medal>
              </div>
              <div class="title" style="color: #af8a77">{{ item.title }}</div>
              <div class="sub-title">{{ item.subTitle }}</div>
              <div class="value" style="color: #af8a77">{{ item.value }}</div>
            </div>
          </template>
        </div>
        <div v-for="(item, i) in rankObj.restList" :key="i" class="ranking-list">
          <div class="ranking-item">
            <div class="rank">{{ item.rank }}</div>
            <span class="title">{{ item.title }}</span>
            <span class="sub-title">{{ item.subTitle }}</span>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
      </el-scrollbar>
    </template>
    <template v-else>
      <base-empty :height="240" loadState="null" description="暂无排名"></base-empty>
    </template>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue';
  import type { PayRank } from '../../get-axios-data';
  import IconFluentEmoji1stPlaceMedal from '~icons/fluent-emoji/1st-place-medal';
  import IconFluentEmoji2ndPlaceMedal from '~icons/fluent-emoji/2nd-place-medal';
  import IconFluentEmoji3rdPlaceMedal from '~icons/fluent-emoji/3rd-place-medal';
  const props = defineProps({
    /** 排行榜数据 */
    rankList: { type: Array as PropType<PayRank[]>, required: true },
  });

  const rankObj = computed(() => {
    return {
      topThreeList: props.rankList.slice(0, 3),
      restList: props.rankList.slice(3),
    };
  });
</script>

<style lang="scss" scoped>
  .ranking-list {
    width: 100%;
    padding: 0 15px;

    .ranking-item {
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 0.5fr 2fr 2fr 1fr;
      grid-gap: 0 5px;
      align-items: center;
      padding: 8px 0;

      .rank {
        @include flex(row, nowrap, center, center, center);
        width: 40px;
        font-size: 16px;
        font-weight: bold;
        color: rgb(248, 165, 10);
      }

      .title {
        overflow: hidden;
        font-size: 14px;
        color: $c-text-2;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sub-title {
        overflow: hidden;
        font-size: 12px;
        color: $c-text-2;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .value {
        font-size: 16px;
        color: $c-text-2;
        text-align: right;
      }
    }
  }
</style>
